<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>css图片轮播的无缝切换</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#box {
				width: 500px;
				height: 300px;
				overflow: hidden;

			}

			img {
				width: 500px;
				height: 300px;
			}

			#box #box1 {
				width: 3500px;
				height: 300px;
				animation: wode 8s infinite normal forwards;
				animation-delay: 1s;
			}

			#box #box1 img {
				float: left;
			}

			li {
				list-style: none;
			}

			@keyframes wode {
				0% {
					margin-left: 0px;
				}

				20% {
					margin-left: -500px
				}

				40% {
					margin-left: -1000px
				}

				60% {
					margin-left: -1500px
				}

				80% {
					margin-left: -2000px
				}

				100% {
					margin-left: -2500px;
				}

			}

			#box3 #d1 {
				position: relative;

			}

			#box3 #d1 #c1 {
				width: 20px;
				height: 20px;

				background-color: white;
				border-radius: 50%;
				position: absolute;
				left: 250px;
				top: -50px;
			}

			#box3 #d1 #c2 {
				width: 20px;
				height: 20px;
				background-color: yellowgreen;
				border-radius: 50%;
				position: absolute;
				left: 300px;
				top: -50px;
			}

			#box3 #d1 #c3 {
				width: 20px;
				height: 20px;
				background-color: white;
				border-radius: 50%;
				position: absolute;
				left: 350px;
				top: -50px;
			}

			#box3 #d1 #c4 {
				width: 20px;
				height: 20px;
				background-color: yellowgreen;
				border-radius: 50%;
				position: absolute;
				left: 400px;
				top: -50px;
			}

			#box3 #d1 #c5 {
				width: 20px;
				height: 20px;
				background-color: white;
				border-radius: 50%;
				position: absolute;
				left: 450px;
				top: -50px;

			}

			div#box3 ul#d1 li:hover a {
				color: #61c4fa;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="box1">
				<img src="img/1.jpg">
				<img src="img/2.jpg">
				<img src="img/3.jpg">
				<img src="img/4.jpg">
				<img src="img/5.jpg">
				<img src="img/1.jpg">
			</div>
		</div>
	<!-- 	<div id="box3">
			<ul id="d1">
				<li id="c1"><a href="#"></a></li>
				<li id="c2"><a href="#"></a></li>
				<li id="c3"><a href="#"></a></li>
				<li id="c4"><a href="#"></a></li>
				<li id="c5"><a href="#"></a></li>
			</ul>

		</div> -->
	</body>
</html>
